<template>
  <div class="custom-tree-container">
    <div class="block">
      <p>模块管理</p>
      <el-tree
        :span="12"
        :data="moduleData"
        node-key="module_code"
        :default-expanded-keys="defaultOpen"
        :default-checked-keys="defaultOpen"
        :expand-on-click-node="false"
        :props="{ children: 'sonModules' }"
      >
        <!--slot-scope  有两个参数  node 代表当前点击节点,  data代表当前点击节点的绑定数据-->
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <!--提取当前节点下面的lable属性-->
          <span>{{ data.module_name }}</span>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="() => addShow(data, node)"
            >
              添加子节点
            </el-button>
            <el-button type="text" size="mini" @click="() => updateShow(data)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >
              删除当前节点
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>

    <el-dialog
      :title="editType == 1 ? '模块添加' : '模块修改'"
      :visible.sync="isShowEdit"
    >
      <el-form
        ref="form"
        :model="moduleInfo"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="模块Code"
              :prop="editType == 1 ? 'module_code' : ''"
            >
              <el-input
                v-model="moduleInfo.module_code"
                :disabled="editType == 1 ? false : true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模块名称" prop="module_name">
              <el-input v-model="moduleInfo.module_name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="父模块Code">
              <el-input
                v-model="moduleInfo.parent_code"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父模块名称">
              <el-input
                v-model="moduleInfo.parent_name"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="模块级别">
              <el-input
                v-model="moduleInfo.module_level"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排序" prop="order_by">
              <el-input v-model.number="moduleInfo.order_by"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否有效">
              <el-switch
                v-model="moduleInfo.module_status"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否菜单">
              <el-switch
                v-model="moduleInfo.is_menu"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否请求">
              <el-switch
                v-model="moduleInfo.is_action"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求url">
              <el-input v-model="moduleInfo.action_url"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button
            type="primary"
            @click="editType == 1 ? moduleAdd() : moduleUpdate()"
            >{{ editType == 1 ? "立即创建" : "修改保存" }}</el-button
          >
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  vModuleCode,
  getModuleDtosAll,
  getModuleDtoByCode,
  moduleUpdate,
  moduleAdd,
} from "./ModuleManagerApi";
export default {
  data() {
    //验证modelcode是否唯一
    var vModuleCodeRole = (rule, value, callback) => {
      console.log("a");
      if (!value) {
        return callback(new Error("模块code不能是空的"));
      } else {
        vModuleCode(this.moduleInfo.module_code).then((r) => {
          if (r.data) {
            callback();
          } else {
            callback(new Error("模块Code已经被使用,请从重新输入模块Code"));
          }
        });
      }
    };
    return {
      defaultOpen: [], //当前选中节点
      moduleData: [],

      moduleInfo: {
        module_code: "",
        module_name: "",

        order_by: -1,
      },
      editType: 1, //编辑类型 1代表添加  2代表修改
      isShowEdit: false,
      rules: {
        module_code: [
          { validator: vModuleCodeRole },
          { required: true, message: "请输入模块Code" },
        ],
        module_name: [{ required: true, message: "请输入模块名称" }],
        order_by: [
          { required: true, message: "排序不能为空" },
          { type: "number", message: "排序必须为数字" },
        ],
      },
    };
  },
  created() {
    this.iniModuleData();
  },

  methods: {
    iniModuleData() {
      getModuleDtosAll().then((r) => {
        this.moduleData = r.data;
        if(r.data.length>0)
        {
          this.defaultOpen=r.data[0].module_code;
        }
      });
    },
    updateShow(data) {
      //显示修改当前节点
      this.editType = 2;
      this.isShowEdit = true;

      getModuleDtoByCode(data.module_code).then((r) => {
        this.moduleInfo = r.data;
      });
    },
    moduleUpdate() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          moduleUpdate(this.moduleInfo).then((r) => {
            if (r.data) {
              this.$message("修改成功");
              this.isShowEdit = false;
              this.editType = 1;

              this.iniModuleData();
              this.defaultOpen.push(this.moduleInfo.parent_code);

              // const newChild = {
              //   id: id++,
              //   label: this.moduleInfo.module_name,
              //   module_code: this.moduleInfo.module_code,
              //   module_level: this.moduleInfo.module_level,
              //   children: [],
              // };
              // if (!data.children) {
              //   this.$set(data, "children", []);
              // }
              // data.children.push(newChild);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addShow(data, node) {
      //显示添加子节点    dataa参数代表点击的当前节点的数据

      this.editType = 1;
      this.isShowEdit = true;
      this.moduleInfo = {}; //在显示之前,把添加对象重置
      this.moduleInfo.parent_code = data.module_code;
      this.moduleInfo.parent_name = data.module_name;
      this.moduleInfo.module_level = data.module_level + 1;
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    moduleAdd() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          moduleAdd(this.moduleInfo).then((r) => {
            if (r.data) {
              this.$message("添加成功");
              this.isShowEdit = false;
              this.iniModuleData();
              this.defaultOpen.push(this.moduleInfo.parent_code);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>